<template>
  <div class="HeadNavInfo">
    <ul>
      <li><router-link to="/">首页</router-link></li>
    </ul>
    <span class="login">
      <router-link to="/login">
        <img class="UserAvatar" :src="UserAvatar" alt="">
      </router-link>
    </span>
  </div>
</template>

<script>
export default {
  name: "HeadNavInfo",
  data(){
    return{
      UserAvatar:require("@/assets/UserAvatar.png")
    }
  }
}
</script>

<style>
.HeadNavInfo{
  margin: 10px auto;
  width: 96%;
  height: 50px;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.5); /* 设置背景颜色，带有透明度 */
  backdrop-filter: blur(10px); /* 添加模糊效果 */
  position: relative;
}
.HeadNavInfo > ul > li{
  float: left;
  line-height: 50px;
  margin: 0 0 0 28px;
}
.login{
  position: absolute;
  top: 5px;
  right: 10px;
  line-height: 50px;
}
.UserAvatar{
  height: 40px;
  border-radius: 50%;
}
</style>